<!DOCTYPE html>
<html>

<head>
    <title>OrbitControls</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <script src="js/three.min.js"></script>
    <script src="js/inflate.min.js"></script>
    <script src="js/FBXLoader.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/Detector.js"></script>
    <script src="js/stats.min.js"></script>
</head>

<body>
    <div id="container"></div>

    <script>
        if (!Detector.webgl) Detector.addGetWebGLMessage();
        let clock = new THREE.Clock();
        let mixers = [];
        let action1;

        let container = document.getElementById('container');

        let renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        container.appendChild(renderer.domElement);

        let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.set(10, 200, 300);

        let controls = new THREE.OrbitControls(camera);
        controls.target.set(0, 100, 0);
        controls.autoRotate = true;
        controls.autoRotateSpeed = -10;
        controls.update();

        let scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        //环境光
        let ambient = new THREE.AmbientLight(0xffffff, 0.8);
        scene.add(ambient);

        //点光源
        let point = new THREE.PointLight(0xFFFFFF, 0.2);
        point.position.set(0, 150, 60);
        scene.add(point);

        let point2 = new THREE.PointLight(0xffffff, 0.1);
        point2.position.set(120, 120, -200);

        let gltfLoader = new THREE.GLTFLoader();
        gltfLoader.load('fbx/box.gltf', function (gltf) {
            console.log('gltf', gltf)
            let object = gltf.scene
            object.mixer = new THREE.AnimationMixer(object);
            mixers.push(object.mixer);
            //action1 = object.mixer.clipAction(gltf.animations[0]);模型自带动画
            object.scale.set(10, 10, 10)
            object.position.x = -60
            object.position.y = 120
            scene.add(object);

        }, undefined, function (error) {
            console.error(error);
        });

        let fbxLoader = new THREE.FBXLoader();
        fbxLoader.load('fbx/stanford-bunny.fbx', function (object) {
            console.log('fbx', object)
            object.mixer = new THREE.AnimationMixer(object);
            mixers.push(object.mixer);
            object.scale.set(0.001, 0.001, 0.001)
            object.position.x = 60
            object.position.y = 120
            scene.add(object);
        });

        function update() {
            if (mixers.length > 0) {
                for (let i = 0; i < mixers.length; i++) {
                    mixers[i].update(clock.getDelta());
                }
            }

            renderer.render(scene, camera);
        }

        function animate() {
            requestAnimationFrame(animate);
            update()
        }

        animate();
    </script>
</body>

</html>